<template>
	<uv-sticky offset-top="-80" bgColor="#fff" zIndex="10" customNavHeight="90">
		<uv-navbar :fixed="true" :placeholder="true" :title="title" left-arrow @leftClick="$onClickLeft" />
		<uv-tabs :list="list" @click="click" :scrollable="false"></uv-tabs>
	</uv-sticky>
	<view class="content">
		<!-- <view v-for="item in 50">9999</view> -->
		<template v-if="activeName == '看板'">
			<Overview :list="overviewList" />
			<PowerPlan />
			<OrderAnalysis />
			<EnercySave />
		</template>

		<template v-if="activeName == '设备'">
			<stationDevice :dzId="dzId" />
		</template>
		<template v-if="activeName == '告警'">
			<stationAlarm />
		</template>
		<template v-if="activeName == '详情'">
			<stationDetail :dzId="dzId" />
		</template>
	</view>


</template>

<script setup>
	import {
		ref
	} from "vue"
	import {
		onLoad
	} from '@dcloudio/uni-app'
	import Overview from "@/pages/components/module/overview/overview.vue"
	import EnercySave from "@/pages/components/module/energySave/energySave.vue"
	import PowerPlan from "@/pages/components/module/powerPlan/PowerPlan.vue"
	import OrderAnalysis from "@/pages/components/module/orderAnalysis/OrderAnalysis.vue"
	import stationDetail from "./components/stationDetail.vue"
	import stationAlarm from "./components/alarm.vue"
	import stationDevice from "./components/device.vue"

	// import {Overview} PowerPlan OrderAnalysis EnercySave
	onLoad((option) => {
		console.log("inner获取参数", option)
		dzId.value = option.id
	})
	const title = ref('电站管理-内')
	const list = ref([{
		name: '看板',
	}, {
		name: '设备',
	}, {
		name: '告警'
	}, {
		name: '详情'
	}])
	const dzId = ref(null)
	const activeName = ref('看板')
	const overviewList = ref([{
			value: '1618.0',
			title: '当前总功率(kW)'
		}, {
			value: '11408.0',
			title: '总装机容量(kWp)'
		}, {
			value: '161.0',
			title: '当日发电量(MWh)'
		},

		{
			value: '1699.0',
			title: '当月发电量(MWh)'
		},

		{
			value: '11861.0',
			title: '当年发电量(MWh)'
		},
		{
			value: '11861.0',
			title: '累计发电量(GWh)'
		},
	])
	const click = (item) => {
		console.log('item', item);
		activeName.value = item.name
	}
</script>

<style lang="scss" scoped>
	.content {
		// padding-top: 104rpx;
		padding-top: 10rpx;
	}
</style>